<template>
  <div class="active-controller">

    <v-aside-content/>
    <div class="active-controller-container">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <!--<el-tab-pane label="流量分析" name="first"></el-tab-pane>
        <el-tab-pane label="分享路径" name="second"></el-tab-pane>
        <el-tab-pane label="表单数据" name="third"></el-tab-pane>
        <el-tab-pane label="传播微页面" name="fourth"></el-tab-pane>
        <el-tab-pane label="订单记录" name="fifth"></el-tab-pane>-->
        <el-tab-pane v-for="tab in activeTabs"
                     v-if="tab[$route.matched[1].name]"
                     :label="tab.label"
                     :name="tab.name"
                     :key="tab.name"></el-tab-pane>
      </el-tabs>
      <keep-alive>
        <router-view/>
      </keep-alive>

    </div>
  </div>

</template>

<script type="text/babel">
import Aside from './Aside/Aside.vue'

export default {
  data () {
    return {
      activeTab: this.$route.name.replace(/minPage|formPage/, ''),
      /* 如需修改name的值  要对应修改router中的路径 */
      activeTabs: [
        {
          label: '流量分析',
          name: 'First',
          minPage: true,
          formPage: true
        },
        {
          label: '分享路径',
          name: 'Second',
          minPage: true,
          formPage: false
        },
        {
          label: '表单数据',
          name: 'Third',
          minPage: true,
          formPage: true
        },
        {
          label: '传播微页面',
          name: 'Fourth',
          minPage: true,
          formPage: false
        },
        {
          label: '订单记录',
          name: 'Fifth',
          minPage: true,
          formPage: false
        }
      ]
    }
  },
  computed: {
    activeid () {
      return this.$route.params.id
    }
  },
  methods: {
    handleTabClick: function (tab, event) {
      this.$router.push({name: this.$route.matched[1].name + this.activeTab, params: {id: this.activeid}})
    }
  },
  components: {
    'v-aside-content': Aside
  },
  watch: {
    $route () {
      this.activeTab = this.$route.name.replace(/minPage|formPage/, '')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
  .active-controller {
    width: auto;
    display: flex;
    flex-direction: row;
    position: relative;

    .active-controller-container {
      flex: 1;
      padding-left: 20px;
      overflow: auto;
      .icon-unit-box {
        border: 1px solid rgba(215, 215, 215, 1);
        padding: 25px 10px;
      }
    }

    /* common */
    /* a标签按钮 */
    a.default, a.export, a.import, a.setting, a.download, a.edit, a.delete {
      display: inline-block;
      text-decoration: none;
      color: #409EFF;
      font-size: 13px;
      margin-left: 15px;
      line-height: 20px;
      img {
        vertical-align: top;
        margin-right: 2px;
      }
    }
    .pagination-text-right {
      text-align: right;
      padding: 13px 0;
    }
    table {
      width: 100%;
    }

  }


</style>
